<template>
	<navigatorComp title="设置" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<view class="content">
		<view class="setting_box">
			<view class="setting_box_item" @click="goUrl('/subPages/mine/setting/editUser')">
				<view class="setting_box_item_title display_flex">个人信息</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
			<view class="setting_box_item">
				<view class="setting_box_item_title display_flex">邀请人</view>
				<view class="display_flex" @click="openInvitePopup">
					<view :class="['placeholder', invitationCode && 'value']">
						{{ invitationCode || '点击输入邀请码' }}
					</view>
					<image v-if="!invitationCode" src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="setting_box">
			<view class="setting_box_item" @click="goUrl('/subPages/mine/setting/accountSafe')">
				<view class="setting_box_item_title display_flex">账号与安全</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
			<view class="setting_box_item" @click="goUrl('/subPages/mine/setting/pushSet')">
				<view class="setting_box_item_title display_flex">推送设置</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
			<view class="setting_box_item" @click="goUrl('/subPages/mine/setting/protocol')">
				<view class="setting_box_item_title display_flex">协议与帮助</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
			<view class="setting_box_item" @click="goUrl('/subPages/mine/setting/aboutUs')">
				<view class="setting_box_item_title display_flex">关于我们</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
		</view>

		<view class="setting_logout" @click="showLogoutModel = true">退出当前账号</view>
	</view>

	<!-- 输入邀请码弹框 -->
	<up-modal :show="inviteCodePopup.show" width="622rpx" :showConfirmButton="false" class="inviteCode_modal_box">
		<view class="inviteCode_modal">
			<view class="inviteCode_modal_close">
				<u-icon name="close" color="#666666" size="23" @click="inviteCodePopup.show = false"></u-icon>
			</view>
			<view class="inviteCode_modal_label">输入邀请码：</view>
			<up-input border="none" v-model="inviteCodePopup.value"
				:customStyle="{ background: '#ECECEC', height: '72rpx' }" fontSize="28rpx" color="#000000"
				@change="change"></up-input>
			<view class="inviteCode_btn" @click="saveCode">保存</view>
		</view>
	</up-modal>


	<!-- 退出登录确认框 -->
	<myModel v-model:show="showLogoutModel" title="是否确认退出登录？" content="" @confirm="logout"></myModel>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import myModel from '/components/model/index.vue';
	import MineApi from '@/API/mine/index.js';
	import store from '@/store/index.js'

	const mineApi = new MineApi();


	const invitationCode = ref('');
	//邀请码弹框
	const inviteCodePopup = reactive({
		show: false,
		value: ''
	});
	const showLogoutModel = ref(false)

	onLoad((options) => {
		invitationCode.value = store.state.userInfo.userInfo.spreadInvitationCode;
	});

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	/**
	 * 退出登录
	 */
	const logout = () => {
		mineApi.signOut().then((res) => {
			if (res.code === 0) {
				uni.clearStorage()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		})
	}

	/**
	 * 打开邀请码弹框
	 */
	const openInvitePopup = () => {
		if(!invitationCode.value){
			inviteCodePopup.value = invitationCode.value;
			inviteCodePopup.show = true;
		}
	};

	/**
	 * 保存邀请码
	 */
	const saveCode = () => {
		if (!inviteCodePopup.value) {
			uni.showToast({
				title: '请输入邀请码',
				icon: none
			});
			return;
		}
		mineApi
			.setInviter({
				invitationCode: inviteCodePopup.value,
				invitationUserId: uni.getStorageSync('userInfo').userId
			})
			.then((res) => {
				if (res.code === 0) {
					invitationCode.value = inviteCodePopup.value;
					store.dispatch('setSpreadInvitationCode',inviteCodePopup.value)
					inviteCodePopup.show = false;
					uni.showToast({
						title: '保存成功'
					});
				}
			});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		padding: 24rpx 32rpx;

		.setting_logout {
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
			text-align: center;
			margin-top: 64rpx;
		}
	}

	.setting_box {
		padding: 48rpx 24rpx 48rpx 32rpx;
		box-sizing: border-box;
		width: 100%;
		background: #292b2a;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;

		.setting_box_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 2rpx;
			}

			.setting_box_item_title {
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 38rpx;
			}

			.placeholder {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
			}

			.value {
				color: #ffffff;
			}
		}
	}

	.inviteCode_modal_box {
		::v-deep .u-modal__content {
			padding: 0 !important;
		}

		::v-deep .u-line {
			display: none !important;
		}
	}

	.inviteCode_modal {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 622rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 72rpx 40rpx 48rpx 40rpx;

		.inviteCode_modal_close {
			position: absolute;
			right: 16rpx;
			top: 16rpx;
		}

		.inviteCode_modal_label {
			position: relative;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
			margin-bottom: 24rpx;
		}

		::v-deep .u-input {
			padding: 22rpx 22rpx 22rpx 26rpx !important;
		}

		.inviteCode_btn {
			position: relative;
			margin: auto;
			margin-top: 48rpx;
			width: 180rpx;
			height: 60rpx;
			background: #f3e0bb;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #524630;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>